<template>
	<a-modal v-model:visible="visible" :title="title" draggable :on-before-ok="handleSubmit"  unmountOnClose>
		<a-form :disabled="isDisabled" ref="formRef" :model="form">
			<a-form-item field="name" label="名称" :rules="[{ required: true, message: '请填写名称' }]">
				<a-input v-model="form.name" placeholder="请填写名称" />
			</a-form-item>
			<a-form-item field="fieldType" label="字段类型" :rules="[{ required: true, message: '请选择字段类型' }]">
				<div class="flex" style="width: 100%">
					<a-select style="width: 100%" allow-clear allow-search v-model="form.fieldType" :options="FIELDS_TYPE" placeholder="请选择字段类型" />
					<a-link v-if="showSelect" style="flex-shrink: 0; margin-left: 8px" :hoverable="false" @click="optionVisible = true">选项维护</a-link>
				</div>
			</a-form-item>
			<a-form-item field="isKey" label="是否关键字">
				<a-switch v-model="form.isKey" />
			</a-form-item>
			<a-form-item field="isShow" label="是否列表展示">
				<a-switch v-model="form.isShow" />
			</a-form-item>
			<a-form-item field="isSearch" label="是否支持筛选">
				<a-switch v-model="form.isSearch" />
			</a-form-item>
			<a-form-item field="isRequired" label="是否必填">
				<a-switch v-model="form.isRequired" />
			</a-form-item>
		</a-form>
	</a-modal>
	<a-modal v-model:visible="optionVisible"  title="选项维护" width="1000px" draggable :on-before-ok="handleOptions" @cancel="emit('cancel')" unmountOnClose>
		<div style="display: flex; justify-content: flex-end; margin-bottom: 8px" >
			<a-button type="secondary" status="danger" :disabled="!selectedKeys.length" @click="delList">删除</a-button>
			<a-button type="primary" @click="addList">新增</a-button>
		</div>
		<a-table :columns="columns" row-key="index" @change="handleChange" v-model:selectedKeys="selectedKeys" :pagination="false" :row-selection="rowSelection" :data="optionList" :draggable="{ type: 'handle', width: 40 }">
			<template #parm="{ rowIndex }">
				<a-input v-model="optionList[rowIndex].parm" :disabled="getDisabled(rowIndex)" />
			</template>
			<template #isDef="{ rowIndex }">
				<a-checkbox v-model="optionList[rowIndex].isDef" :disabled="getDisabled(rowIndex)" @change="handleDef(rowIndex)"></a-checkbox>
			</template>
		</a-table>
	</a-modal>
</template>

<script setup lang="ts">
import { addField, updateField } from "@/api/customerManage/setting";
import { FIELDS_TYPE } from "@/utils/filter";
import { Message } from "@arco-design/web-vue";

const visible = ref(false);
const selectedKeys = ref([]);
const optionVisible = ref(false);
const rowSelection = reactive({
	type: "checkbox",
	showCheckedAll: true,
	onlyCurrent: false
});
// 是否禁用（系统默认的禁用）
const isDisabled = computed(() => {
	return form.value.dataType == 0;
});
const getDisabled = (index)=>{
	const flag = optionList.value[index].dataType == 0
	optionList.value[index].disabled = flag
	return flag
}

const props = defineProps({
	bizId: {
		type: String
	}
});
const form: any = ref({});
const reset = () => {
	form.value = {
		name: "",
		isKey: false,
		fieldType: 1,
		dataType: 1,
		isShow: true,
		isSearch: true,
		isRequired: true,
		status: 0,
		sort: "",
		fieldValueList: null
	};
	optionList.value = [];
};
const title = ref("");
const emit = defineEmits(["update",'cancel']);
const add = () => {
	reset();
	title.value = "新增字段";
	visible.value = true;
};
const edit = (data) => {
	title.value = `修改${data.name}`;
	setForm(data)
	visible.value = true;
};
const setForm = (data)=>{
	form.value = JSON.parse(JSON.stringify(data));
	optionList.value = data?.fieldValueList || [];
	optionList?.value.forEach((i, index) => (i.index = i.id));
}
const columns = [
	{
		title: "名称",
		dataIndex: "parm",
		slotName: "parm"
	},
	{
		title: "默认",
		dataIndex: "isDef",
		slotName: "isDef"
	}
];

const showSelect = computed(() => {
	return [2, 7, 8].includes(form.value.fieldType);
});

const optionList:any = ref([]);
const formRef = ref({});
const handleSubmit = async () => {
	const data = await formRef.value.validate();
	if (data) return false;
	await updateForm()
	return true;
};

const updateForm = async ()=>{
	if (showSelect.value && !optionList.value.length) {
		Message.error("请填写选项值");
		return false;
	}
	const obj = {
		...form.value,
		fieldValueList: optionList.value,
		bizId: props.bizId,
		sourceType: form.value?.sourceType || 0
	};
	const api = form.value.id ? updateField : addField;
	await api(obj);
	emit("update");
	Message.success("操作成功");
}

const handleDef = (index) => {
	optionList.value.forEach((i) => (i.isDef = false));
	optionList.value[index].isDef = true;
};

const handleOptions = async () => {
	const flag = optionList.value.find((i) => !i.parm);
	if (flag) {
		Message.error("请填写名称");
		return false;
	}
	optionList.value.forEach((i, index) => (i.sort = index+1));
	await updateForm()
	return true;
};
const delList = () => {
	optionList.value = optionList.value.filter((i) => selectedKeys.value.findIndex((child) => child == i.index) == -1);
	selectedKeys.value = [];
};
const handleChange = (_data) => {
	optionList.value = _data;
};
const addList = () => {
	optionList.value.push({
		index: Math.random()
	});
};

const updateFn =async (data)=>{
	setForm(data)
	await updateForm()
}

const setSelectData = (data)=>{
	setForm(data)
	optionVisible.value = true
}

defineExpose({
	add,
	edit,
	setSelectData,
	updateFn
});
</script>

<style scoped></style>
